Show number of unread conversations in app badgenotifs-controls

1 files changed, 15 insertions, 0 deletions

diff --git a/ui/routes/(app)/c/[conversation]/+page.svelte b/ui/routes/(app)/c/[conversation]/+page.svelte
index 24baa47..be97737 100644
--- a/ui/routes/(app)/c/[conversation]/+page.svelte
+++ b/ui/routes/(app)/c/[conversation]/+page.svelte
@@ -1,6 +1,7 @@
 <script>
   import { DateTime } from 'luxon';
   import { page } from '$app/state';
+  import ChannelMeta from '$lib/components/ChannelMeta.svelte';
   import MessageInput from '$lib/components/MessageInput.svelte';
   import MessageRun from '$lib/components/MessageRun.svelte';
   import Message from '$lib/components/Message.svelte';
@@ -10,6 +11,9 @@
   const { session, outbox } = data;
   let activeConversation;
 
+  const subscription = $derived(session.push.subscription);
+  const vapid = $derived(session.push.vapidKey);
+
   const conversationId = $derived(page.params.conversation);
   const conversation = $derived(
     session.conversations.find((conversation) => conversation.id === conversationId),
@@ -56,6 +60,11 @@
     if (!!at) {
       session.local.updateLastReadAt(conversationId, at);
     }
+    navigator.serviceWorker.controller.postMessage({
+      type: 'CONVERSATION_READ',
+      conversationId,
+      at,
+    });
   }
 
   $effect(() => {
@@ -82,6 +91,11 @@
     lastReadCallback = setTimeout(setLastRead, 2 * 1000);
   }
 
+  async function subscribe() {
+    // TODO: we need to provide specific subscription stuff, right?
+    await session.push.subscribe();
+  }
+
   async function sendMessage(message) {
     outbox.sendToConversation(conversationId, message);
   }
@@ -93,6 +107,7 @@
 
 <svelte:window onkeydown={handleKeydown} />
 
+<ChannelMeta {subscribe} {vapid} {subscription} />
 <div class="active-conversation" {onscroll} bind:this={activeConversation}>
   {#each messageRuns as { sender, ownMessage, messages }}
     <MessageRun